<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.search" placeholder="全局搜索" style="width:200px;" class="filter-item"/>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handlerFilter">搜索</el-button>
        </div>
        <el-table
        v-loading="loadingTableVisible"
        :element-loading-text="loadingTableTitle"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0,0.8)"
        :data="list"
        border
        style="width:100%;font-size:12px;"
        :row-style="{height:'30px'}"
        :cell-style="{padding:'3px'}"
        >
            <el-table-column label="编号" prop="id" align="center" width="80">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
             <el-table-column label="文件名" prop="name" align="center" >
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="文件大小" prop="length" align="center" >
                <template slot-scope="scope">
                    <span>{{scope.row.length}}</span>
                </template>
            </el-table-column>
              <el-table-column label="文件类型" prop="type" align="center" >
                <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                </template>
            </el-table-column>
               <el-table-column label="文件夹" prop="folder" align="center" >
                <template slot-scope="scope">
                    <span>{{scope.row.folder}}</span>
                </template>
            </el-table-column>
               <el-table-column label="地址" prop="path" align="center" >
                <template slot-scope="scope">
                    <span>{{scope.row.path}}</span>
                </template>
            </el-table-column>
             <el-table-column label="上传时间" prop="creationTime" align="center" width="150" >
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                     <span>{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                </template>
            </el-table-column>
        </el-table>
          <!--分页-->
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getFileLogs" />
    </div>
</template>
<script>
import waves from '@/directive/waves'
import pagination from '@/components/TablePage'
import {parseTime} from '@/utils'
import {getFileLogList,getFileLogInfo} from '@/api/log'

export default {
    components:{pagination},
    directives:{waves},
    data(){
        return{
            listQuery:{
                page:1,
                limit:20,
                search:''
            },
            total:0,
            list:[],
            loadingTableVisible:false,
            loadingTableTitle:'拼命加载中',
        }
    },
    created(){
        this.getFileLogs()
    },
    methods:{
        getFileLogs(){
            this.loadingTableVisible=true
            getFileLogList(this.listQuery).then((response)=>{
                this.list=response.data.items
                this.total=response.data.total
                this.loadingTableVisible=false
                this.loadingTableTitle='拼命加载中'
            }).catch(()=>{
                this.loadingTableVisible=false
                this.loadingTableTitle='拼命加载中'
            })
        },
        handlerFilter(){
            this.listQuery.page=1
            this.getFileLogs()
        }
    }
}
</script>